<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.sql.*, java.util.*" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>查看时间</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 页面加载完成后立即获取时间
        $(document).ready(function() {
            $.ajax({
                url: 'getCurrentTime.jsp',  // 获取当前时间的JSP页面
                type: 'GET',
                success: function(response) {
                    document.getElementById('time').innerHTML = "当前是北京时间: " + response;
                }
            });
            setInterval(function() {
                $.ajax({
                    url: 'getCurrentTime.jsp',  // 获取当前时间的JSP页面
                    type: 'GET',
                    success: function(response) {
                        // 将获取到的时间显示在页面中
                        document.getElementById('time').innerHTML = "当前是北京时间: " + response;
                    }
                });
            }, 1000);  // 每1000毫秒（即1秒）刷新一次
        });
    </script>
    <style>

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;  /* 柔和的背景色 */
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;  /* 让页面充满视口 */
        }

        .container {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 100%;
            max-width: 400px;  /* 限制最大宽度 */
        }

        /* 标题样式 */
        h2 {
            color: #333;
            font-size: 24px;
            margin-bottom: 20px;
        }

        /* 时间文本样式 */
        #time {
            font-size: 22px;
            font-weight: bold;
            color: #2c3e50;  /* 深色字体 */
            margin-top: 20px;
            padding: 10px;
            background-color: #ecf0f1;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: inline-block;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>查看时间</h2>
    <p id="time">当前是北京时间: </p>
</div>

</body>
</html>
